<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <th:block th:include="include :: header('文章添加')"/>
</head>
<body>
<section class="content">
  <div class="box box-default color-palette-box">
    <div class="box-header with-border">
      <h3 class="box-title"></h3>
    </div>
    <form class="form-horizontal" id="newsArticleForm">
      <div class="box-body">
        <div class="form-group">
          <label class="col-sm-2 control-label">标题名称 :</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" name="title" id="title" required
                   placeholder="请输入标题名称">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">文章分类 :</label>
          <div class="col-sm-9">
            <select id="newsCategoryId" name="newsCategoryId" class="form-control select2"
                    style="width:100%;" required>
              <option value="" selected="selected">--请选择类目（必选）--</option>
              <option th:each="category:${categoryList}" th:value="${category.newsCategoryId}"
                      th:text="${category.categoryName}"></option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">文章摘要 :</label>
          <div class="col-sm-9">
            <textarea class="form-control" name="brief" id="brief" rows="3" placeholder="请输入文章摘要"
                      required></textarea>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">列表图片 :</label>
          <div class="col-sm-9">
            <input type="hidden" id="bannerPic" name="bannerPic">
            <div class="file-loading">
              <input id="bannerImg" name="file" type="file" multiple>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">文章内容 :</label>
          <div class="col-sm-9">
            <textarea id="content" name="content"></textarea>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">浏览量 :</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" name="viewsNum" id="viewsNum"
                   placeholder="请输入浏览量" required>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">显示状态 :</label>
          <div class="col-sm-9">
            <label class="radio-inline pr-5"><input type="radio" name="status" value="1" required>
              显示</label>
            <label class="radio-inline pr-5"><input type="radio" name="status" value="0"
                                                    checked="checked" required> 隐藏</label>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">是否置顶 :</label>
          <div class="col-sm-9">
            <label class="radio-inline pr-5"><input type="radio" name="setTop" value="1" required>
              置顶</label>
            <label class="radio-inline pr-5"><input type="radio" name="setTop" value="0"
                                                    checked="checked" required> 不置顶</label>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">&nbsp;</label>
          <div class="col-sm-8 col-sm-offset-5">
            <button type="button" class="btn btn-primary" onclick="submitHandler()"><i
                class="fa fa-save"></i>保存
            </button>
            <button type="button" class="btn btn-default" onclick="closeTab()"><i
                class="fa fa-close"></i>取消
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</section>
<th:block th:include="include :: footer"/>
<script th:src="@{/plugins/tinymce/tinymce.min.js}"></script>
<script type="text/javascript">
  tinymce.init({
    selector: '#content',
    language: 'zh_CN',
    toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
            styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
            table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
    height: 650,
    min_height: 600
  });
  //单图上传
  $("#bannerImg").fileinput({
    uploadUrl: ctx + 'sysfile/upload',
    maxFileCount: 1,
    autoReplace: true,
    initialPreviewAsData: true,
    validateInitialCount: true,
    previewSettings: {
      image: {width: "auto", height: "100px"}
    },
    initialPreview: [],
    layoutTemplates: {
      actionUpload: '',//去除上传预览缩略图中的上传图片
      actionDownload: '',//去除上传预览缩略图中的下载图标
      actionDelete: '', //去除上传预览的缩略图中的删除图标
    },
  }).on('fileuploaded', function (event, data, previewId, index) {
    var rsp = data.response;
    console.log("return fileUrl：" + rsp.fileUrl);
    console.log("reutrn fileName：" + rsp.fileName);
    $('#bannerPic').val(rsp.fileUrl);
  }).on('filecleared', function (event) {
    $('#bannerPic').val('');
  })

  // 提交请求
  function submitHandler() {
    var content = tinyMCE.activeEditor.getContent();
    $("#content").val(content);
    if ($("#newsArticleForm").validate().form()) {
      $.common.postAjax(
        ctx + ctx + "newsArticle/doAdd",
        $("#newsArticleForm").serialize(),
        function (data) {
          if (data.code == 0) {
            // 返回刷新列表页
            var topWindow = $(window.parent.document);
            var currentId = $('.page-tabs-content', topWindow).find('.active').attr('data-panel');
            var $contentWindow = $('.J_iframe[data-id="' + currentId + '"]', topWindow)[0].contentWindow;
            closeItem();
            $contentWindow.$.table.refreshTable();
            $contentWindow.toastr.success(data.msg);
          } else {
            toastr.error(data.msg);
          }
        }
      )
    }
  }

  // 关闭页签
  function closeTab() {
    closeItem();
  }
</script>
</body>
</html>
